<template>
	 <view class="container">
	
	    <!-- 维修方式选择 -->
	    <view class="section">
	      <text class="section-title">维修方式：</text>
	      <radio-group class="radio-group" @change="handleRepairTypeChange">
	        <label class="radio-item"  @click="dao_car">
	          <radio value="1" :checked="repairType === '1'" color="#007AFF"/>
	          到店维修
	        </label>
	        <label class="radio-item" @click="qu_car">
	          <radio value="2" :checked="repairType === '2'" color="#007AFF" />
	          上门取车
	        </label>
	      </radio-group>
	    </view>
	
	    <!-- 客户信息 -->
	    <view class="section">
	      <text class="section-title">客户信息</text>
	      <input class="input" placeholder="请输入车主名" v-model="car_owner"/>
	      <input class="input" placeholder="请输入联系方式" type="number" v-model="phone"/>
	      <picker class="input" mode="date" @change="bindDateChange">
	        <text class="placeholder">{{ selectedDate || '请选择时间' }}</text>
	      </picker>
		<input v-show="show_place" class="input" placeholder="请输入取车地点" v-model="pickeupAddr" @click="chooseStarAddr"/>
	    </view>
	
	    <!-- 车辆信息 -->
	    <view class="section">
	      <text class="section-title">车辆信息</text>
	      <input class="input" placeholder="请输入车辆类型" />
	      <input class="input" placeholder="请输入车牌号" />
	    </view>
	
	
	    <!-- 提交按钮 -->
	   <!-- <view class="submit-container"> -->
	      <button class="submit-btn" @click="enterSuccessPage">提交</button>

	    <!-- </view> -->
	  </view>
</template>

<script setup>
	import { ref,onMounted } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import request from '../../../utils/request';
	

	
	onMounted(() => {
		getuser();
	})
	
	const shopId = ref(null)
	const show_place=ref(false)
		
		onLoad((options) => {
		  shopId.value = options.id
		  console.log('接收到的ID:', shopId.value)
		  
		  // 实际开发中这里应该请求接口获取详情数据
		  fetchShopDetail(shopId.value)
		})
		const qu_car=function(){
			show_place.value=true
			
		}
		
		const dao_car=function(){
			show_place.value=false
		}
		
		const fetchShopDetail = (id) => {
		  // 根据ID请求接口数据
		  console.log('预约正在请求门店ID为', id, '的详情数据')
		}
		
		const userId=ref(0)
		function getuser(){
			uni.getStorage({
			    key: 'userId',
			    success: function (res) {
			        console.log('获取的数据:', res);
					userId.value=res.data
					console.log(userId.value)
					
			    },
			    fail: function (err) {
			        console.error('获取数据失败', err);
			    }
			});
			
		}
		
		// 维修类型（默认到店维修）
		const repairType = ref('1')
		const selectedDate = ref('')
		const carPhotos = ref([])
		const repairPhotos = ref([])

		
		// 选择维修方式
		const handleRepairTypeChange = (e) => {
		  repairType.value = e.detail.value
		}
		// 选择日期
		const bindDateChange = (e) => {
		  selectedDate.value = e.detail.value
		}
	
		const car_owner=ref("")
		const phone=ref()
		const pickeupAddr=ref("")
		
		function chooseStarAddr(){
			uni.chooseLocation({
				success: (res) => {
					console.log("选择位置")
					console.log(res)
				pickeupAddr.value=res.address
				console.log(pickeupAddr.value)
				}
			})
		}
		const currentTime = ref('')
		const getTime = () => {
		  const now = new Date()
		  currentTime.value = now.toLocaleString('zh-CN', { 
		    hour12: false,
		    timeZone: 'Asia/Shanghai'
		  })
		}
		// 提交表单
		const enterSuccessPage=function() {
			getTime();
			// uni.navigateTo({
			// url:'/pages/gmh/book_success/book_success'
			// })
			console.log(car_owner.value,"手机号",phone.value,"时间",selectedDate.value,"方式:",repairType.value)
			
			request({
				url:"/gmh/repairRecord/add",
				method:"post",
				data:{
					orderNumber:"",
					userId:userId.value,
					vehicleId:0,
					repairMethod:repairType.value,
					pickupLocation:pickeupAddr.value,
					appointmentDate:selectedDate.value,
					submissionDate:currentTime.value,
					imageId:0,
					status:0
				}
			}).then(res=>{
				console.log(res)
				uni.navigateTo({
				url:'/pages/gmh/book_success/book_success'
				})
			}).catch(err=>{
				console.log(err)
			})
		}
</script>

<style>
	     .container {
	       padding: 32rpx;
	       background: #fff;
	       min-height: 100vh;
	     }
	    
	     .section {
	       margin: 40rpx 0;
	       padding-bottom: 30rpx;
	       border-bottom: 2rpx solid #f5f5f5;
	     }
	     
	     .section-title {
	       display: block;
	       color: #333;
	       font-size: 34rpx;
	       font-weight: 500;
	       margin: 20rpx 0;
	     }
	     
	     .radio-group {
	       display: flex;
	       gap: 60rpx;
	       margin-top: 20rpx;
	     }
	     
	     .input {
	       height: 88rpx;
	       background: #f8f8f8;
	       border-radius: 12rpx;
	       padding: 0 24rpx;
	       margin: 20rpx 0;
	       font-size: 28rpx;
	       display: flex;
	       align-items: center;
	     }
	     
	     .upload-box {
	       width: 240rpx;
	       height: 240rpx;
	       border: 2rpx dashed #007AFF;
	       border-radius: 16rpx;
	       margin-top: 20rpx;
	     }
	     
	     .upload-placeholder {
	       display: flex;
	       flex-direction: column;
	       align-items: center;
	       justify-content: center;
	       height: 100%;
	       color: #007AFF;
	     }
	     
	     .plus {
	       font-size: 48rpx;
	       margin-bottom: 16rpx;
	     }
	     
	     .preview-image {
	       width: 100%;
	       height: 100%;
	       border-radius: 12rpx;
	     }
	     
	     .submit-container {
	       position: fixed;
	       bottom: 40rpx;
	       left: 5%;
	       right: 5%;
	     }
	     
	     .submit-btn {
	       width: 100%;
	       height: 96rpx;
	       background: #007AFF;
	       color: white;
	       border-radius: 48rpx;
	       font-size: 34rpx;
	       transition: opacity 0.3s;
	     }
	     
	     .submit-btn:active {
	       opacity: 0.8;
	     }  
</style>
